import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import instance from "../../api/request";
import { Avatar, Button, Input, List,Modal  } from "antd";
function Index() {
  const [infos, setInfos] = useState([]);
  const location = useLocation();
  const { info } = location.state;
  const id = info.id;
  const [list, setList] = useState();
  const [huilist,setHuilist]=useState()
  
  const getData = () => {
    instance.get(`article/${id}`).then((res) => {
      setInfos(res.data.comments);
    });
  };
  useEffect(() => {
    getData();
  }, [id]);
  const handlists=(e)=>{
    setList(e)
  }
  const fa=()=>{
    instance.post('/discuss',{
        userId:47529555,
        content:list,
        articleId:id 
    }).then(res=>{
        if(res.status===200){
            setList("")
        }
       
    })
  }

  const [isModalOpen, setIsModalOpen] = useState(false);

  const hui = () => {
    setIsModalOpen(true);
    

  };

  const handleOk = () => {
    setIsModalOpen(false);
    instance.post('/discuss',{
        userId:47529555,
        content:huilist,

        articleId:id 
    }).then(res=>{
        setHuilist("")
    })
    setIsModalOpen(false)
  };
  const handhuilist=(e)=>{
    setHuilist(e)
    
  }
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <div>
        <h1>{info.title}</h1>
        <span>作者：贾旭生</span>
        <span>阅读量：{info.viewCount}</span>
        <span>创建时间：{info.createdAt}</span>
      </div>
        
      <div>
      
        <List
          itemLayout="horizontal"
          dataSource={infos}
          renderItem={(item, index) => (
            <List.Item 
            >
              <List.Item.Meta
                avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${item.id || index}`} />}
                // title={item.username || `用户${index + 1}`}
                description={item.createdAt}
              />
             
             
              <div className="kk">
               <Button onClick={hui}>回复</Button>
               {
                infos.map((item)=>{
                    return(
                        <div>
                            <p>{item.content}</p>
                        </div>
                    )
                })
              }
             
              </div>
            </List.Item>
            
          )}
        />
        
        <div>
        
          <Input.TextArea
            value={list}
            maxLength={100}
            placeholder="请输入评论"
            onChange={(e) => handlists(e.target.value)}
          />
        </div>
        <Button onClick={fa}>评论</Button>
        <Modal
        title="回复"
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
         <Input.TextArea
            value={huilist}
            maxLength={100}
            placeholder="请输入评论"
            onChange={(e) => handhuilist(e.target.value)}
          />
      </Modal>
      </div>
    </div>
  );
}

export default Index;
